<template>
	<!-- title部分 -->
	<view class="title">
		<view class="title_leftbox" @click="goToWode">
			<image class="title_leftbox_image_fanhui" src="../../static/返回.png"></image>
		</view>
		<view class="title_middlebox">
			<view class="title_middlebox_text">消息推送设置</view>
		</view>
		<view class="title_rightbox">
			<!-- <image class="title_rightbox_img" src="../../static/wenhao.png"></image> -->
		</view>
	</view>
	<!-- 内容部分 -->
	<view class="nrbufen">

		<!-- 可重复部分 -->
		<view class="nrbox">
			<view class="nrbox_textbox">
				<view class="nrbox_textbox_text1">中奖音效开关</view>
				<view class="nrbox_textbox_text2">可选择首页中奖弹窗音效</view>
			</view>
			<view class="nrbox_imgbox">
				<image class="nrbox_imgbox_img" src="../../static/xiangyoujiantou.png"></image>
			</view>
		</view>

		<view class="nrbox">
			<view class="nrbox_textbox">
				<view class="nrbox_textbox_text1">推送开关</view>
				<view class="nrbox_textbox_text2">开启后可及时获取相关信息推送</view>
			</view>
			<view class="nrbox_imgbox">
				<switch :checked="allSwitch" color="rgb(226, 50, 52)" @change="switch1Change"
					style="transform:scale(0.7)" />
			</view>
		</view>

		<view class="nrbox">
			<view class="nrbox_textbox">
				<view class="nrbox_textbox_text1">开奖信息</view>
				<view class="nrbox_textbox_text2">购彩后通知，彩种包括大乐透、胜负彩/任选9场</view>
			</view>
			<view class="nrbox_imgbox">
				<switch :checked="switch2" color="rgb(226, 50, 52)" @change="switch2Change"
					style="transform:scale(0.7)" />
			</view>
		</view>

		<view class="nrbox">
			<view class="nrbox_textbox">
				<view class="nrbox_textbox_text1">账户变动</view>
				<view class="nrbox_textbox_text2">提款等资金操作，第一时间通知您</view>
			</view>
			<view class="nrbox_imgbox">
				<switch :checked="switch3" color="rgb(226, 50, 52)" @change="switch3Change"
					style="transform:scale(0.7)" />
			</view>
		</view>

		<view class="nrbox">
			<view class="nrbox_textbox">
				<view class="nrbox_textbox_text1">票务提醒</view>
				<view class="nrbox_textbox_text2">开启后，每次方案出票后，第一时间通知您</view>
			</view>
			<view class="nrbox_imgbox">
				<switch :checked="switch4" color="rgb(226, 50, 52)" @change="switch4Change"
					style="transform:scale(0.7)" />
			</view>
		</view>

		<view class="nrbox">
			<view class="nrbox_textbox">
				<view class="nrbox_textbox_text1">优惠活动提醒</view>
				<view class="nrbox_textbox_text2">开启后，可收到平台优惠活动通知</view>
			</view>
			<view class="nrbox_imgbox">
				<switch :checked="switch5" color="rgb(226, 50, 52)" @change="switch5Change "
					style="transform:scale(0.7)" />
			</view>
		</view>

		<view class="nrbox">
			<view class="nrbox_textbox">
				<view class="nrbox_textbox_text1">关注提醒</view>
				<view class="nrbox_textbox_text2">开启后，第一时间获知已关注用户的最新发单</view>
			</view>
			<view class="nrbox_imgbox">
				<switch :checked="switch6" color="rgb(226, 50, 52)" @change="switch6Change "
					style="transform:scale(0.7)" />
			</view>
		</view>

		<view class="nrbox">
			<view class="nrbox_textbox">
				<view class="nrbox_textbox_text1">夜间免打扰</view>
				<view class="nrbox_textbox_text2">开启后，您在夜间(23:00-08:00不会收到推送信息)</view>
			</view>
			<view class="nrbox_imgbox">
				<switch :checked="switch7" color="rgb(226, 50, 52)" @change="switch7Change "
					style="transform:scale(0.7)" />
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				allSwitch: true, // 控制所有开关的状态
				switch2: true,
				switch3: true,
				switch4: true,
				switch5: true,
				switch6: true,
				switch7: true
			}
		},
		methods: {
			goToWode() {
				// 在tabbar中使用uniapp的switchTab方法跳转
				uni.switchTab({
					url: '/pages/wode/wode', // 我的路径
				});
			},

			switch1Change: function(e) {
				this.allSwitch = e.detail.value;
				// 如果 switch1 被选中，则确保其他开关也被选中
				if (this.allSwitch) {
					this.switch2 = true;
					this.switch3 = true;
					this.switch4 = true;
					this.switch5 = true;
					this.switch6 = true;
					this.switch7 = true;
				} else {
					// 如果 switch1 未被选中，则确保其他开关也未被选中
					this.switch2 = false;
					this.switch3 = false;
					this.switch4 = false;
					this.switch5 = false;
					this.switch6 = false;
					this.switch7 = false;
				}
			},
			switch2Change: function(e) {
				this.switch2 = e.detail.value;
				this.updateAllSwitch();
			},
			switch3Change: function(e) {
				this.switch3 = e.detail.value;
				this.updateAllSwitch();
			},
			switch4Change: function(e) {
				this.switch4 = e.detail.value;
				this.updateAllSwitch();
			},
			switch5Change: function(e) {
				this.switch5 = e.detail.value;
				this.updateAllSwitch();
			},
			switch6Change: function(e) {
				this.switch6 = e.detail.value;
				this.updateAllSwitch();
			},
			switch7Change: function(e) {
				this.switch7 = e.detail.value;
				this.updateAllSwitch();
			},
			updateAllSwitch: function() {
				// 如果 switch2, switch3, switch4, switch5 全部被选中，则选中 switch1
				// 如果任何一个未被选中，则不选中 switch1
				this.allSwitch = this.switch2 || this.switch3 || this.switch4 || this.switch5 || this.switch6 || this
					.switch7;
			}

		}
	}
</script>

<style>
	page {
		background-color: #f9f9f9;
	}

	/* 以下是title部分样式 */
	.title {
		background-color: rgb(226, 50, 52);
		display: flex;
		align-items: center;
		justify-content: space-between;
		/* 使左右盒子分别位于两侧 */
		padding: 2%;
	}

	.title_leftbox {
		display: flex;
		align-items: center;
		justify-content: center;
		/* 使图标居中 */
	}

	.title_leftbox_image_fanhui {
		width: 20px;
		height: 25px;
	}

	.title_middlebox {
		flex-grow: 1;
		/* 使中间盒子占据剩余空间 */
		display: flex;
		align-items: center;
		justify-content: center;
		/* 使文本居中 */
	}

	.title_middlebox_text {
		font-size: 15px;
		color: white;
		font-weight: 700;
	}

	.title_rightbox {
		display: flex;
		align-items: center;
		justify-content: center;
		/* 使文本居中 */
	}

	/* 
	.title_rightbox_img {
		width: 22px;
		display: block;
		height: 22px;
	} */

	/* 内容部分样式 */
	.nrbufen {
		padding: 2%;
	}

	.nrbox {
		display: flex;
		align-items: center;
		margin-bottom: 3%;
	}

	.nrbox_textbox {
		flex: 1;
	}

	.nrbox_textbox_text1 {
		font-size: 15px;
		margin-bottom: 5px;
	}

	.nrbox_textbox_text2 {
		font-size: 12px;
		color: #909399;
	}

	.nrbox_imgbox {}

	.nrbox_imgbox_img {
		width: 18px;
		height: 18px;
	}
</style>
